import  React from 'react'


//视图组件 

//引入 connect 连接 把 Provider 包装的组件跟我们需要展示的组件连接起来
import {connect} from 'react-redux'


class List extends React.Component {

    constructor() {
        super()
        this.state={
            msg:'你好'
        }
    }



    componentDidMount() {
        console.log('1')
        console.log(this.props)
    }


    myUNADD=()=>{
        this.props.myListJian(100)
    }



    
    render() {
        return(
            <div>
                <h2>List   {this.props.msg}</h2>
                <div>{this.props.counter}</div>

                <button  onClick={()=>this.props.changeCounter()}>点击 list组件 改变 counter的值</button>
                <button  onClick={this.myUNADD}>点击 list组件 改变 counter的值</button>
               
            </div>
        )
    }
}



/*

'第一个参数就是映射的属性值','第二个参数是映射的方法'  顺序不能对调  

 export  default    connect('第一个参数就是映射的属性值','第二个参数是映射的方法')(App)
*/



// state    reudx 里面定义的值
// 映射属性  props 自己的值    父组件传递过来的值
const mapStateToProps=(state,props)=>{  // 成年人都要

    // console.log('2')

    // console.log(state)
    console.log(props)


    return {
        counter:state,
        msg:'list组件',
        ...props,  /*  都要*/

    }

       
}

//映射的方法
const mapDispatchToProps=(dispatch)=>{

    return {
        changeCounter:()=>dispatch({type:'ADD'}),
        myListJian:(num)=>dispatch({type:'UNADD',num}) 
    }
}

export  default    connect(mapStateToProps,mapDispatchToProps)(List)
